<script id="toolbar" type="text/html">
    <a href="{:url('add')}" class="layui-btn layui-btn-primary layui-icon layui-icon-add-circle-fine">&nbsp;添加</a>
</script>
<div class="layui-form">
    <table id="table"></table>
    <script type="text/html" id="imgTpl">
            <div style="line-height:18px;">
                <img class="review" src="{{ d.img ? d.img : '__ADMIN_IMG__/avatar.png' }}" width="60" height="60" class="fl">
            </div>
        </script>
    <script type="text/html" id="statusTpl">
            <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用" {{ d.status == 1 ? 'checked' : '' }} data-href="{:url('status')}?hisiModel=banner&id={{ d.id }}">
        </script>
    <script type="text/html" title="操作按钮模板" id="buttonTpl">
        <a href="{:url('add')}?id={{ d.id }}" {{ d.status == 1 ? '' : 'style="display:none"' }} class="layui-btn layui-btn-xs layui-btn-normal">修改</a>
        <a href="{:url('del')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger j-tr-del">删除</a>
    </script>
</div>
{include file="system@block/layui" /}
<script type="text/javascript">
    layui.use(['jquery', 'laydate', 'table'], function () {
        var $ = layui.jquery, laydate = layui.laydate, table = layui.table;
        table.render({
            elem: '#table'
            , url: '{:url()}' //数据接口
            , page: true //开启分页
            , limit: 15
            , limits: [15, 30, 50, 100, 200]
            , cellMinWidth: 90
            , text: {
                none: '暂无相关数据'
            }
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter']
            , cols: [[ //表头
                { field: 'title', title: '标题', width: 100 }
                , { field: 'img', title: '图片', width: 100, templet: "#imgTpl" }
                , { field: 'status', title: '状态', sort: true, width: 100, templet: "#statusTpl" }
                , { field: 'create_time', title: '创建时间', width: 200, sort: true }
                , { title: '操作', templet: '#buttonTpl' }
            ]]
        });

        // 筛选
        $('#searchForm').submit(function () {
            var that = $(this), arr = that.serializeArray(), whereObj = {};
            for (var i in arr) {
                whereObj[arr[i].name] = arr[i].value;
            }

            table.reload('table', {
                url: '{:url()}',
                where: whereObj
            });
            return false;
        });

        $('body').on('click', '.review', function () {
            var _this = $(this);
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: '800px',
                shadeClose: true,
                content: '<div id="img" style="z-index: 19891015;text-align: center;"><img style="width:100%;" src="' + _this.attr('src') + '"></div>'
            });
        })

        laydate.render({
            elem: '#dateFilter'
            , range: true
        });
    });
</script>